<template>
  <div class="set-tranfer-number">
    <a-form ref="formDataRef" autocomplete="off" name="basic" :model="formState" :label-col="{ style: 'width:80px' }" :wrapper-col="{ style: 'calc(100% - 80px)' }" @finish="onSubmit">
      <a-form-item label="轨迹名称" name="content" :rules="[{ required: true, message: '请选择轨迹名称!' }]">
        <a-select v-model:value="formState.content" placeholder="请选择" showSearch mode="tags">
          <a-select-option v-for="item in dataDict['TRAJECTORY_NODE']" :key="item.consValue" :value="item.name" :label="item.name">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="轨迹时间" name="nodeTime" :rules="[{ required: true, message: '请选择轨迹时间', trigger: 'change' }]">
        <a-date-picker v-model:value="formState.nodeTime" show-time placeholder="请选择" />
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 8, span: 16 }" class="submit-btn-form-item">
        <a-button :loading="loading" type="primary" html-type="submit">确定</a-button>
        <a-button @click="resetForm">取消</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import CommonHook from "@/hook/commonHook";

const props = withDefaults(
  defineProps<{
    visible: boolean;
    type: number;
    passData: DepartmentPersonnel.ListRows;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "submit"): void;
  (e: "update:visible", visible: boolean): void;
}>();

const { visible, passData } = toRefs(props);
const { dataDict } = CommonHook();
const { tableData, formState, loading, formDataRef } = InitHook();
const { onSubmit, resetForm } = OperationHook({
  visible,
  passData,
  tableData,
  formState,
  loading,
  formDataRef,
  emit
});

watch(
  () => visible.value,
  v => {
    if (!v) {
      resetForm();
    }
  }
);
</script>
<style lang="stylus" scoped>
.set-tranfer-number {
  background-color: #fff;

  .operation-btn-wrapper {
    :deep(.ant-btn) {
      margin-right: 16px;
    }
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
